<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改进度</title>
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../lib/element-ui/element-ui-2.8.2.css">
    <link rel="stylesheet" href="../../lib/bootstrap-3.3.7/css/bootstrap.css">

    <style>
        .el-pagination {

            margin-top: 15px;
            margin-left: 36%;
        }

        body {

            user-select: none;
        }

        body .my-layui .layui-layer-title {
            border-bottom: none;
            background-color: white;
        }

        .el-progress-bar__inner {

            transition: all 1s ease-out;


        }
        .el-notification{

            z-index: 99999999;
        }


    </style>
</head>
<body>

<div id="app">

    <el-row type="flex" justify="center">

        <el-col :span="22">

            <el-table
                    :data="tableData"
                    style="width: 100%"
                    v-loading="loading"
                    @row-click="rowClick"
            >
<!--                    @selection-change="multipleSelect"-->


                <el-table-column
                        type="index"
                        align="center"
                        width="55">
                </el-table-column>

                <el-table-column
                        label="项目名称"
                        prop="projectName"
                        column-key="projectName"
                        width="200px"
                        align="center"
                >

                </el-table-column>


                <el-table-column
                        label="预算"
                        prop="planExpenses"
                        column-key="planExpenses"
                        width="150px"
                        align="center"
                >

                </el-table-column>

                <el-table-column
                        label="预计开始时间"
                        prop="planStartTime"
                        column-key="planSTartTime"
                        width="150px"
                        align="center"
                >

                </el-table-column>

                <el-table-column
                        label="预计结束时间"
                        prop="planEndTime"
                        width="150px"
                        align="center"
                >

                </el-table-column>

                <el-table-column
                        label="人天"
                        prop="manDay"
                        width="100px"
                        align="center"
                >

                </el-table-column>


                <el-table-column
                        label="申请时间"
                        prop="createTime"
                        width="250px"
                        sortable
                        align="center"
                ></el-table-column>

                <el-table-column
                        label="申请内容"
                        prop="applyDesc"
                        width="100px"
                        align="center"

                >
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">

                            <p>
                                <el-tag>
                                    <i class="fa fa-calendar"></i>
                                    <span>项目</span>
                                </el-tag>
                                {{ scope.row.projectName }}
                            </p>

                            <p>
                                <el-tag>
                                    <i class="fa fa-commenting-o"></i>
                                    <span>备注</span>
                                </el-tag>
                                {{ scope.row.projectDesc }}
                            </p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium" type="info">备注详情</el-tag>
                            </div>
                        </el-popover>
                    </template>

                </el-table-column>


                <el-table-column
                        label="进度"
                        width="250px"
                >

                    <el-progress :text-inside="true" :stroke-width="18" :percentage="form.percentage"
                                 status="success"></el-progress>

                </el-table-column>


            </el-table>


            <el-button-group class="pull-right" v-if="selectList.length > 1">
                <el-button
                        size="small"
                        type="primary"
                        icon="el-icon-edit"
                        round
                        @click='submitBatch("2")'
                >
                    批量通过
                </el-button>
                <el-button
                        size="small"
                        type="danger"
                        icon="el-icon-delete-solid"
                        round
                        @click='submitBatch("3")'
                >
                    批量拒绝
                </el-button>
            </el-button-group>

            <el-pagination
                    background
                    layout="prev, pager, next, total"
                    :total=page.total
                    :current-page=page.current
                    :page-size=page.size
                    @current-change="handleCurrentChange"
                    v-if="showPagination"

            >
            </el-pagination>

        </el-col>


    </el-row>

    <div id="updateProject" v-loading="loading" hidden style="margin-top: 15px">

        <el-row type="flex" justify="space-around">
            <el-col :span="10">

                <el-form label-width="150px">

                    <el-form-item label="开始时间">

                        <el-date-picker
                                v-model="form.startTime"
                                type="date"
                                placeholder="选择日期"
                                :editable=false
                                name="dateSelect"

                        >
                        </el-date-picker>

                    </el-form-item>

                    <el-form-item label="结束时间">

                        <el-date-picker
                                v-model="form.endTime"
                                type="date"
                                placeholder="选择日期"
                                :editable=false
                                name="dateSelect"

                        >
                        </el-date-picker>

                    </el-form-item>


                    <el-form-item label="当前支出(万元)">

                        <el-slider
                                v-model="form.currentExpense"
                                :step="1"
                                show-input
                                show-input-controls
                                input-size="mini"
                        >
                        </el-slider>
                    </el-form-item>

                    <el-form-item label="进度">

                        <el-progress
                                :text-inside="true"
                                :stroke-width="18"
                                :percentage="form.percentage"
                                status="success"
                        ></el-progress>

                        <el-input-number
                                v-model="form.percentage"
                                style="margin: 5px"
                                :min="0"
                                :max="100"
                        ></el-input-number>

                    </el-form-item>

                    <el-form-item label="备注">

                        <el-input
                                v-model="form.updateDesc"
                                type="textarea"
                                maxlength="200"
                                rows="5"
                                show-word-limit
                        ></el-input>


                    </el-form-item>

                    <el-form-item>

                        <el-button

                                type="primary"
                                icon="el-icon-success"
                                round
                                @click="submitUpdate"

                        >
                            提交
                        </el-button>

                        <el-button

                                type="danger"
                                icon="el-icon-refresh"
                                round

                        >
                            重置
                        </el-button>

                    </el-form-item>


                </el-form>

            </el-col>

            <el-col :span="12">


                <!--                <p style="text-align: center; margin: 10px auto">添加员工</p>-->
                <el-transfer v-model="form.selectEmpl"
                             :data="emplList"
                             filterable
                             :props="{label:'name',key:'userId'}"
                             :titles=['选择员工','已选员工']
                ></el-transfer>

            </el-col>

        </el-row>

    </div>


</div>


</body>


</html>

<script src="../../lib/jQuery-3.31/jquery-3.3.1.js"></script>
<script src="../../lib/vue/vue.js"></script>
<script src="../../lib/layui-2.4.5/layui.all.js"></script>
<script src="../../lib/element-ui/elementUI-2.8.2.js"></script>

<script>

    var app = new Vue({

        el: "#app",

        data: {

            loading: false,
            tableData: [],

            loading: true,

            selectList: [],

            showPagination: false,//显示分页器

            emplList: [],

            page: {

                total: 0,
                current: 1,
                size: 0

            },

            form: {
                currentExpense: 0,
                startTime: '',
                endTime: '',
                percentage: 50,
                selectEmpl: [],
                updateDesc: ''

            }

        },


        methods: {

            //处理点击上/下一页
            handleCurrentChange: function (current) { //val为点击之后的页

                getData(current);

            },


            rowClick: function (row, column, event) {


                layer.open({

                    skin: 'my-layui',
                    type: 1,
                    area: ['90%', '90%'],
                    title: row.projectName,
                    content: $('#updateProject'),
                    success: function () {

                        sessionStorage.setItem("projectId", row.projectId);
                        getAllUser();

                        app.form.currentExpense = parseInt(row.planExpenses.substr(0, 2));

                    },
                    cancel: function () {
                        $('#updateProject').hide()
                    }

                })


            },
            submitUpdate: function () {


                $.ajax({

                    url: '/project/updateSubmit',
                    data: {
                        'projectId': sessionStorage.getItem("projectId"),
                        'startTime': app.form.startTime,
                        'endTime': app.form.endTime,
                        'currentExpense': app.form.currentExpense,
                        'percentage': app.form.percentage,
                        'users': JSON.stringify(app.form.selectEmpl),
                        'updateDesc': app.form.updateDesc

                    },
                    beforeSend: function () {
                        app.loading = true;

                    },
                    success: function (result) {

                        app.loading = false;
                        if (result.success === true) {


                            app.$notify.success({

                                title: '提交成功',
                                msg: result.msg

                            });
                            $('.el-notification').css('z-index','99999999')

                        } else {
                            app.$notify.error({

                                title: '提交失败',
                                msg: result.msg
                            });
                            $('.el-notification').css('z-index','99999999')
                        }

                    }


                })


            }


        },

        created: getData()


    })


    /**
     * 格式化时间 yyyy-MM-dd hh:mm:ss
     * @param dateTime
     * @returns {string}
     */
    function formatDate(dateTime) {

        let date = new Date(dateTime);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let min = date.getMinutes();
        let second = date.getSeconds();

        if (mon < 10) mon = '0' + mon;
        if (day < 10) day = '0' + day;

        return year + '-' + mon + '-' + day + ' ' + hour + ':' + min + ':' + second;

    }

    /**
     * 获取当前页面最新数据
     * @param current
     */
    function getData(current) {


        $.ajax({

            url: '/project/getMyApplyProject',
            data: {'current': current},
            type: 'get',

            success: function (result) {

                if (result.success === true) {


                    app.tableData = [];
                    let resData = result.data;

                    for (let datas of resData.records) {

                        datas.planStartTime = formatDate(datas.planStartTime);
                        datas.planEndTime = formatDate(datas.planEndTime);
                        datas.createTime = formatDate(datas.createTime);

                        datas.planStartTime = datas.planStartTime.substr(0, 10);
                        datas.planEndTime = datas.planEndTime.substr(0, 10);
                        datas.projectStatus = datas.projectStatus === '1' ? '审核中' : '通过';

                        app.tableData.push(datas);

                    }

                    app.page.total = resData.total;
                    app.page.current = resData.current;
                    app.page.size = resData.size;

                    app.loading = false;

                    app.showPagination = true;


                } else {

                    app.$notify.warning({
                        title: '警告',
                        message: result.msg

                    })

                }
            }

        })

    };


    function getAllUser() {

        $.ajax({

            url: '/const/getalluser',
            type: 'get',

            success: function (result) {

                if (result.success === true) {

                    app.emplList = result.data;

                } else {

                    app.$notify.warning({
                        title: '警告',
                        message: result.msg

                    })

                }
            }

        })

    }


    $('[name="dateSelect"]').click(function () {
        $('.el-picker-panel').css('z-index', '99999999')
    });


</script>